<template>
  <view class="conten">
    <!-- 体验课与试听课 -->
    <view class="audition">
      <view class="experience">
         <view style="margin-top:-2rpx" class="systemImg" v-for="(item,index) in courseList" :key="index">
           <easy-loadimage mode="widthFix" :scroll-top="scrollTop" :image-src="item.imgUrl" loadingMode="spin-circle"></easy-loadimage>
         </view>
         <view style="height: 120rpx;"></view>
      </view>
      <view class="footer">
        <view class="btnget" @click="promptlyGet">立即领取</view>
      </view>
        <!-- 挽留弹窗 -->
      <detaim-loding ref="detaimPopup" @affirmClick="openOrder"></detaim-loding>
        <!-- 定位顶部添加老师的狗皮膏药 -->
      <view class="position-top">
        <view class="add-teacher" :class="topTeacherStatus ? 'teacher-animation' : 'begin-anima'">
          <view class="teacher-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/teacher.png"></image></view>
          <view class="text-conter">您还没有加专属辅导员哦，添加后可享受一对一专业辅导，学习效果加倍~</view>
          <view class="ben-add" @click="jumpApplet">
            <view class="go-addNmae">去添加</view>
            <view class="iconfont">&#xe6ab;</view>
            <launch-weapp v-if="$wechat.isWechat()" :wxPath="wxPath"></launch-weapp>
          </view>
        </view>
         <view class="animation-circle" v-if="topTeacherStatus" @click="clickBall ">
           <view class="img-box">
             <image style="border-radius: 50%;" mode="aspectFill" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/teacher.png"></image>
           </view>
         </view>
      </view>
    </view>
  </view>
</template>

<script>
  import topTabbar from '@/components/topTabbar/index.vue'
  import { squeezePage, buyClass } from '@/utils/api.js'
  import detaimLoding from '@/components/loding/detaimLoding.vue'
  import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
  import luoButton from '../../components/botton/luo-botton.vue'
  import launchWeapp from '@/components/subscribe/launchWeapp.vue' // 跳小程序组件
  export default {
    components: { 
      topTabbar, 
      detaimLoding, 
      easyLoadimage,
      luoButton,
      launchWeapp
    },
  	data() {
  		return {
        pathUrl: '', // 地址参数
        wxPath: 'pages/add_account/system', // 跳小程序地址---默认是什么都没买的地址
        topTeacherStatus: false, // 顶部添加老师的横幅显示与隐藏
        scrollTop:0, // 懒加载需要的高度
        courseId:'444e80df-20f1-17d2-7d5a-3a0016483644', // 系统课id:444e80df-20f1-17d2-7d5a-3a0016483644 // 体验课id：a368d592-3f65-b9af-04ac-3a00150f4e72，
        fromPary: { // 回显的参数
          phone:'', // 手机号码
          logoImageUrl:'', // 商品图片
          platform: '',
          radid: '',
          rsid:'',
          skuid: ''
        },
        courseList: [ // 课程数据
          { id: 1, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/system/system1_v2.png'},
          { id: 2, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/system/system2_v1.jpg'},
          { id: 3, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/system/system3_v1.jpg'},
          { id: 4, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/system/system4_v1.jpg'},
          { id: 5, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/system/system5_v1.jpg'},
          { id: 6, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/system/system6_v2.jpg'}
        ], 
      }
    },
    onPageScroll({scrollTop}) {
      // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
      this.scrollTop = scrollTop
      // 大于100添加老师文案滑出
      if (scrollTop > 100) {
         this.topTeacherStatus = true
      }
    },
    onLoad(params) {
      const vm = this
      vm.pathUrl = window.location.href.split('?')[1]
      if(vm.$auth.getUrlPrams("phonenumber")) {
        vm.fromPary.phone = vm.$auth.getUrlPrams("phonenumber")
      }
       vm.$wechat.unseBehavior()
     // 微信环境下获取openid与分享配置
     if(vm.$wechat.isWechat()){
       if(vm.$auth.getUrlPrams("code")){
         vm.$auth.init()
         setTimeout(() => {
          vm.junmPay(vm.fromPary.phone)
         },1000)
       }
       // 权限注入与分享
       this.$wechat.share({
         title: '从组装中国空间站开始学习思维建模',
         desc: '编程是载体，思维建模更重要！',
         link: window.location.href,
         imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/app_log.png'
       })
     }
      // 支付失败打开挽留弹窗
      if(params.pageNum) {
        setTimeout(()=>{
          vm.$refs.detaimPopup.getPopupOpen() 
        },100)
      }
    },
    methods:{ 
    /* 立即领取+跳支付+打开绑定弹窗
     如果是微信环境，判断有没有openId,没有就要授权获取
      如果知道电话号码，说明绑定过，直接跳支付
    */
     promptlyGet() {
       const vm = this
       if(vm.$wechat.isEnterprise()){
         vm.junmPay(vm.fromPary.phone)
         return;
       }
       if(vm.$wechat.isWechat()){
         const openId = uni.getStorageSync('openId')
         if(!openId){
           vm.$auth.init()
         }else{
            vm.junmPay(vm.fromPary.phone)
        }
       }else{
          vm.junmPay(vm.fromPary.phone)
       }
     },
      // 跳支付页
      junmPay(phone) {
        const vm = this
        uni.navigateTo({
          url: '/pages/my/order/payment?phone='+phone+'&skuid='+vm.courseId+'&'+vm.pathUrl,
            success:(res)=>{
              if(res.errMsg == 'navigateTo:ok'){
                if(vm.$isIos){
                  window.location.reload ( true ) 
                }
              }
            }
        }) 
      },
      // 点击老师图片滑出按钮与文案
      clickBall() {
        this.topTeacherStatus = false
      },
      // 跳小程序
      jumpApplet() {
        window.location.href = 'weixin://dl/business/?t=gBX7jORYXvt'
      },
      // 立即体验-关闭体验弹窗
      openOrder() {
        const vm = this
        vm.$refs.detaimPopup.getPopupConcal() // 关闭挽留弹窗
        vm.junmPay(vm.fromPary.phone) 
      }
    }
  }
</script>

<style lang="scss" scoped>
  image{
    width: 100%;
    height: 100%;
    vertical-align:bottom;
  }
  /deep/ .top-tabbar-wrap{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .experience{
    // 系统课定位
    .systemImg{
      width: 100%;
      height: 1430rpx;
    }
    /* mode为widthFix即图片高度自适应时要设置占位图默认高度 */
    /deep/ .loading-img{
      height: 500rpx;
    }
  }
  .footer{
    width: 750rpx;
    height: 120rpx;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(20rpx);
    -webkit-backdrop-filter: blur(20rpx);
    -moz-backdrop-filter: blur(20rpx);
    -ms-backdrop-filter: blur(20rpx);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: env(safe-area-inset-bottom);
    .btnget{
       width: 680rpx;
       padding: 6rpx 0;
       border-radius: 44rpx;
       font-weight: bold;
       background: #FF2A2A;
       text-align: center;
       color: #FFFFFF;
       font-weight: bold;
       font-size: 48rpx;
       color: #FFFFFF;
       animation-fill-mode: both;
       animation: btnget 1s infinite 1s;
       letter-spacing: 0.2em;
    }
     @keyframes btnget {
        0% { transform: scale(1,1);}
        50% { transform: scale(0.97,0.97);}        
        100% { transform: scale(1,1);}
      }
  }
  // 定位顶部老师的狗皮膏药
  .position-top{
     position: fixed;
     left: 0;
     right: 0;
     top: 88rpx;
     // margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
    .teacher-animation{
      animation-fill-mode: both;
      animation: teacher-animation 2s forwards 0.1s;
    }
    .begin-anima{
      animation-name: begin-anima;
      -webkit-animation-name: begin-anima;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      animation-timing-function: ease-in-out;
      -webkit-animation-timing-function: ease-in-out;
      visibility: visible !important;
      animation-fill-mode: forwards;
    }
    @keyframes teacher-animation {
       0% { 
         -webkit-transform: translate(0);
         -moz-transform: translate(0);
         -ms-transform: translate(0);
         transform: translate(0);
         opacity: 1;
         }
       100% { 
         -webkit-transform: translate(120%);
         -moz-transform: translate(120%);
         -ms-transform: translate(120%);
         transform: translate(120%);
         opacity: 0;
       }
     }
     @keyframes begin-anima {
        0% { 
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -ms-transform: translateX(100%);
          transform: translateX(100%);
          opacity: 0;
          }
        100% { 
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0);
          opacity: 1;
          }
      }
    .add-teacher{
      width: 670rpx;
      height: 72rpx;
      background: rgba(0,0,0,0.4);
      backdrop-filter: blur(12rpx);
      border-radius: 36rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .teacher-img{
        width: 72rpx;
        height: 72rpx;
        position: absolute;
        top: 0rpx;
        left: 0rpx;
      }
      .text-conter{
        font-size: 20rpx;
        margin-left: 94rpx;
        width: 58%;
        color:#FFFFFF;
      }
      .ben-add{
        width: 158rpx;
        height: 72rpx;
        background: #FF800C;
        color: #FFFFFF;
        border-radius: 0px 36rpx 36rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .go-addNmae{
          font-weight: 500;
          font-size: 28rpx;
          margin-bottom: 5rpx;
        }
      }
    }
    .animation-circle{
      width: 80rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 38rpx 0px 0px 38rpx;
      z-index: 99;
      display: flex;
      align-items: center;
      .img-box{
        width: 72rpx;
        height: 72rpx;
        margin-left: 5rpx;
      }
    }
  }
</style>

